<template>
  <div class="content-container">
    <el-row :gutter="10">
      <div class="index__content___3xrWj">
        <div class="index__model_tags___1-PXC">
          <div class="index__container___1aPmt"><h2 class="index__personasTitle___NibKB">用户群画像</h2>
            <div class="index__box___1-lon">
              <div class="index__listRow___3qPRn">
                <div class="index__listNumber___1zqPi">
                  <div class="index__circle___332dc"><span class="index__number___1bKMi">1</span></div>
                </div>
                <p>使用 <strong>标签、用户行为、用户属性</strong> 进行筛选，获得目标群体</p></div>
              <div class="index__listRow___3qPRn">
                <div class="index__listNumber___1zqPi">
                  <div class="index__circle___332dc"><span class="index__number___1bKMi">2</span></div>
                </div>
                <p>观察目标群体的 <strong>标签分布、行为指标</strong> 和 <strong>用户构成</strong></p></div>
              <div class="index__listRow___3qPRn">
                <div class="index__listNumber___1zqPi">
                  <div class="index__circle___332dc"><span class="index__number___1bKMi">3</span></div>
                </div>
                <p>将目标群体保存为 <strong>用户群标签</strong> 或 <strong>导出人群列表</strong></p></div>
              <el-button type="primary" class="ant-btn ant-btn-primary" @click="createUserPortrait"><span>创建用户群画像</span></el-button>
              <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
            </div>
            <div class="index__imgBg___36hmu"></div>
          </div>
        </div>
        <el-row :gutter="10" class="mb8" >
          <el-col  :span="1.5">
            <strong style="font-size:18px">用户群画像列表</strong>
<!--            <span style="font-size:12px;">共 2 个</span>-->
          </el-col>
          <el-col :span="1.5" style="float: right">
<!--            <el-checkbox v-model="queryParams.onlyMe">仅我创建</el-checkbox>-->
            <el-input style="width:140px"
                      placeholder="搜索名称/创建者"
                      prefix-icon="el-icon-search"
                      v-model="queryParams.displayName">
            </el-input>


          </el-col>
        </el-row>
        <div class="index__all_tags___3HoCH">
          <el-table v-loading="loading" :data="groupList">
            <el-table-column label="名称" align="center" prop="displayName">
              <template slot-scope="scope">
                <router-link :to="'/group/create?id=' + scope.row.id" class="linkId" :title="scope.row.remark?scope.row.remark:'暂无备注'">
                  {{ scope.row.displayName }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column label="创建者" align="center" prop="creator"/>
            <el-table-column label="创建时间" align="center" prop="createTime" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <!-- <el-button
                  size="small"
                  type="text"
                  icon="el-icon-document"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['base:group:edit']"
                >
                </el-button> -->
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['base:group:remove']"
                >
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </el-row>

  </div>
</template>

<script>
import EventVBarChart from "@/views/base/group/comments/EventVBarChart";
import EventBarChart from "@/views/base/group/comments/EventBarChart";
import {getGroupHistoryData, listGroup} from "@/api/base/group";
import {listUserPortrait,delUserPortrait} from "@/api/tags/portrait";

export default {
  name: "userPortrait",
  components: {
    EventVBarChart, EventBarChart
  },
  data() {

    return {
      // 遮罩层
      loading: true,
      // 查询参数
      total:0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        updateType: '',
        status: '',
        onlyMe: '',
        lastCalcStatus: '',
        buildType: '',
        tagsName: ''
      },
      chartTitle: [],
      chartData: {},
      tableData: [],
      groupList:[],
      activeName: 'first'

    };
  },
  created() {
    const deviceId = this.$route.query && this.$route.query.id;
    this.currentGroupId = 0;
    this.getList();
  },
  methods: {
    createUserPortrait(){
      this.$router.push({path:'/group/create'});
    },
    handleNodeClick(data) {
      console.log(data);
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      listUserPortrait(this.queryParams).then(response => {
        this.groupList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    		/** 删除按钮操作 */
		handleDelete(row) {
			// this.msgSuccess("功能还未完成，敬请期待！");
			// return;
			const ids = row.id || this.ids;
			this.$confirm('是否确认删除用户画像编号为"' + ids + '"的数据项?', "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(function () {
				return delUserPortrait(ids);
			}).then(() => {
				this.getList();
				this.msgSuccess("删除成功");
			}).catch(function () { });
		},
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.content-container {
  width: 100%;
  padding: 0 20px;
  background: #f7f9fa;
  display: flex;
  flex-direction: column;
  .index__model_tags___1-PXC {
    margin-top:10px;
    border-color: #1890ff;
    background-color: #fff;
    margin-bottom: 18px;
    padding: 20px 20px 5px;
    overflow: hidden;
    .index__container___1aPmt {
      position: relative;
      padding: 24px;
      background: #fff;
      border-radius: 3px;
      .index__personasTitle___NibKB {
        font-weight: 500;
        font-size: 24px;
        line-height: 36px;
        color: #1f2d3d;
        margin-bottom: 16px;
      }
      .index__box___1-lon {
        width: 590px;
        .index__listRow___3qPRn {
          display: flex;
          margin-bottom: 16px;
          align-items: center;
          .index__listNumber___1zqPi {
            flex: 0 0 32px;
            display: flex;
            align-items: center;
            height: 20px;
            .index__circle___332dc {
              width: 18px;
              height: 18px;
              border: 1px solid #04cb94;
              border-radius: 50%;
              display: inline-flex;
              justify-content: center;
              align-items: center;
              .index__number___1bKMi {
                color: #04cb94;
                font-size: 12px;
                font-weight: 500;
              }
            }
          }
        }
      }
      .index__imgBg___36hmu {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: calc(100% - 590px);
        background-image: url();
        background-repeat: no-repeat;
        background-size: 304px auto;
        background-position: calc(100% - 24px) 50%;
      }
    }
  }
}

.linkId{
  color: #559ff0;
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  transition: color .3s;
}

</style>
